<template>
  <div class="dialog">
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      title="创建权限组"
      :visible="dialogVisible"
      width="50%"
      @close="closeDalog"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <!-- 
            data:展示数据
            show-checkbox
            highlight-current	是否高亮当前选中节点，默认值是 false。
            default-expand-all	是否默认展开所有节点
          -->
          <el-tree
            :data="list"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :default-checked-keys="form.permissions"
            @check="handleCheckChange">
          </el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDalog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {menusList} from '@/api/menus'
import {addpermissionsList,simpleList,detail,update} from '@/api/permissions'
export default {
  name: 'PermissionDialog',
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return{
      form: {
        title:'',
        permissions:[]
      },
      rules:{
        title: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ]
      },
      defaultProps: {
        label: 'title',//指定节点标签为节点对象的某个属性值
        children: 'childs'//给指定子树为节点对象的某个属性值
      },
      list: []
    }
  },
  mounted() {
    this.getMuenList()
  },
  methods: {
    handleCheckChange(data, checked) {
      console.log(checked.checkedKeys);
      this.form.permissions = checked.checkedKeys
    },
    // 递归方法 把pionts字段换位childs 
    convertPointsToChilds(obj) {  
        if (Array.isArray(obj)) {  
          // 如果obj是数组，递归处理每个元素  
          return obj.map(this.convertPointsToChilds);  
        } else if (typeof obj === 'object' && obj !== null) {  
          // 如果obj是对象，递归处理childs和points  
          if (obj.hasOwnProperty('childs')) {  
            obj.childs = this.convertPointsToChilds(obj.childs); // 递归处理childs  
          }  
          if (obj.hasOwnProperty('points')) {  
            obj.childs = obj.points; // 将points重命名为childs  
            delete obj.points; // 删除原来的points属性  
          }  
          return obj;  
        }  
        // 如果obj不是数组也不是对象，直接返回它（基本类型）  
        return obj;  
    },
  closeDalog() {
      this.$emit('close-dalog')
      // 清空列表
      this.form = {
        title:'',
        permissions: []
      },
      this.$refs.form.resetFields();
    },
    // 确认按钮
    confirm() {
      // 兜底校验
      this.$refs.form.validate(async (valid)=>{
        if(valid) {
          // 校验通过
          // 判断新增还是编辑
          if(!this.form.id){
            // console.log(this.form.id);
            // 调新增接口
            await addpermissionsList(this.form)
            this.$message.success("添加成功")
          }else {
            // console.log(this.form.id);
            // 编辑接口
            await update(this.form)
            this.$message.success("更新成功")
          }
          // 关闭弹窗
          this.closeDalog()
          // 提示用户？？？？？？？？？？？？
          // this.$message.success(`${this.form.id ? "更新成功" : "添加成功" } `)
          // 刷新列表
          this.$emit('get-list')
        }
      })
    },
    async getMuenList() {
      const res = await menusList()
      // console.log('权限分配',this.convertPointsToChilds(res));
      this.list = this.convertPointsToChilds(res)
      // console.log(this.list);
    },
    // 数据回填
    async getDetail(id) {
      // 获取数据详情
      const res = await detail(id)
      // console.log('详情', res);
      this.form = res
    }
  }
  

}
</script>

<style>

</style>